<head>
    <link rel="stylesheet" href="../userinfo/userinfo.css">
    <link rel="stylesheet" href="./score.css">
</head>

<body style="scale: 1;">
    <div class="background">
        <img src="../../otherill/ComputeItWithSomeDevilishAlcoholicSteampunkEngines.かめりあ.png" alt="{{background}}">
    </div>
    <div class="left">
        <div class="Player_Info">
            <p>PLAYER_INFO</p>
        </div>
        <div class="Player_Info-after"></div>
        <div class="basic-box">
            <div class="song_Id">
                <p name="pvis">Compute It With Some Devilish Alcoholic Steampunk Engines</p>
            </div>
            <div class="basic-img">
                <img src="../../otherill/ComputeItWithSomeDevilishAlcoholicSteampunkEngines.かめりあ.png"
                    alt="{{gameuser.backgroundurl}}">
            </div>
            <div class="Player_Id">
                <div class="avatar">
                    <img src="../avatar/Aphasia.png" alt="{{avatar}}">
                </div>
                <div class="Player_Id-box">
                    <div class="Player_Id-left">
                        <p>ID</p>
                    </div>
                    <div class="Player_Id-right">
                        <p name="pvis">就是不会告诉你</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="left_title">
            <div class="left_title-left">
                <p>PLAYER_DETAIL</p>
            </div>
        </div>
        <div class="Player_data_line">
            <div class="Player_data_line-left">
                <div class="Player_data_title" id="Player_data_left">
                    <p>RKS</p>
                </div>
                <div class="Player_data_value" id="Player_data_left">
                    <p>14.6578</p>
                </div>
            </div>
            <div class="Player_data_line-right">
                <div class="Player_data_title" id="Player_data_right">
                    <p>CLG MOD</p>
                </div>
                <div class="Challenge" id="Challenge2">
                    <img src="../otherimg/5.png" alt="{{ChallengeMode}}">
                    <span>54</span>
                </div>
                <div class="Player_data_value CLG colorful" id="Player_data_right">
                    <p id="CLG">-0th Dan-/v3.2. 0</p>
                </div>
            </div>
        </div>
        <div class="left_title">
            <div class="left_title-left">
                <p>SONG_DETAIL</p>
            </div>
        </div>
        <div class="rank_dif_1">
            <div class="a_rank">
                <div class="a_rank_dif">
                    <p>14.6</p>
                </div>
                <div class="a_rank_name">
                    <p>EZ</p>
                </div>
            </div>
            <div class="a_rank">
                <div class="a_rank_dif">
                    <p>14.6</p>
                </div>
                <div class="a_rank_name">
                    <p>HD</p>
                </div>
            </div>
            <div class="a_rank">
                <div class="a_rank_dif">
                    <p>14.6</p>
                </div>
                <div class="a_rank_name">
                    <p>IN</p>
                </div>
            </div>
            <div class="a_rank">
                <div class="a_rank_dif">
                    <p>14.6</p>
                </div>
                <div class="a_rank_name">
                    <p>AT</p>
                </div>
            </div>
        </div>
        <div class="createdbox">
            <div class="phi-plugin">
                <p>{{_plugin}}</p>
            </div>
            <div class="ver">
                <p>{{Version.ver}}</p>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="file-content">
            <div class="file-content-left">
                <p>SCORE_DATA</p>
            </div>
        </div>
        <div class="data_title">
            <div class="data_title-left">
                <p>SCORE_HISTORY</p>
            </div>
        </div>
        <div class="stats-box">
            <div class="one-stats-box EZ" id="A">
                <div class="rank">
                    <p>EZ</p>
                </div>
                <div class="stats-up">
                    <div class="Rating">
                        <img src="../otherimg/phi.png" alt="{{Rating}}">
                    </div>
                    <div class="data_score">
                        <p>1000000</p>
                    </div>
                </div>
                <div class="data_mid">
                    <div class="data_rks">
                        <p>14.6000</p>
                    </div>
                    <div class="data_acc">
                        <p>100.0000%</p>
                    </div>
                </div>
                <div class="data_bottom">
                    <div class="data_suggest">
                        <p>>>100.0000%</p>
                    </div>
                </div>
            </div>
            <div class="one-stats-box HD" id="A">
                <div class="rank">
                    <p>HD</p>
                </div>
                <div class="stats-up">
                    <div class="Rating">
                        <img src="../otherimg/FC.png" alt="{{Rating}}">
                    </div>
                    <div class="data_score">
                        <p>1000000</p>
                    </div>
                </div>
                <div class="data_mid">
                    <div class="data_rks">
                        <p>14.6000</p>
                    </div>
                    <div class="data_acc">
                        <p>100.0000%</p>
                    </div>
                </div>
                <div class="data_bottom">
                    <div class="data_suggest">
                        <p>>>100.0000%</p>
                    </div>
                </div>
            </div>
            <div class="one-stats-box IN" id="A">
                <div class="rank">
                    <p>IN</p>
                </div>
                <div class="stats-up">
                    <div class="Rating">
                        <img src="../otherimg/NEW.png" alt="{{Rating}}">
                    </div>
                </div>
            </div>
            <div class="one-stats-box AT" id="A">
                <div class="rank">
                    <p>AT</p>
                </div>
                <div class="no_info">
                    <p>NO_INFO</p>
                </div>
            </div>
        </div>
        <div class="data_title">
            <div class="data_title-left">
                <p>SCORE_HISTORY</p>
            </div>
        </div>
        <div class="scoreHistory">
            <div class="oneHistory AT">
                <div class="HistoryDate">
                    <p>2023/06/18 00:09:38</p>
                </div>
                <div class="HistoryRating">
                    <img src="../otherimg/phi.png" alt="{{Rating}}">
                </div>
                <div class="HistoryScore">
                    <p>1000000</p>
                </div>
                <div class="HistoryAcc">
                    <p>100.0000%</p>
                </div>
                <div class="HistoryRks">
                    <p>16.00</p>
                </div>
            </div>
            <div class="oneHistory {{Rating}}">
                <div class="HistoryDate">
                    <p>{{date_new}}</p>
                </div>
                <div class="HistoryRating">
                    <img src="../otherimg/{{Rating}}.png" alt="{{Rating}}">
                </div>
                <div class="HistoryScore">
                    <p>{{score_new}}</p>
                </div>
                <div class="HistoryAcc">
                    <p>{{acc_new.toFixed(4)}}%</p>
                </div>
                <div class="HistoryRks">
                    <p>1{{rks_new.toFixed(2)}}</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 曲目名称自适应name-box的宽度 -->
    <script>
        function adjustFontSize() {
            //获取p元素
            var a = document.getElementsByName('pvis')
            for (var i = 0; i < a.length; ++i) {

                const songName = a[i]
                if (!songName) continue


                /*调整曲目名称字体大小*/
                var parentElement = songName.parentElement

                var maxFontSize = 23.5 //设置最大字体大小

                //如果字体宽度小于父元素宽度，则增大字体大小
                while (songName.scrollWidth < parentElement.offsetWidth && songName.scrollHeight < parentElement.offsetHeight) {
                    var style = window.getComputedStyle(songName, null).getPropertyValue('font-size')
                    var fontSize = parseFloat(style)

                    //检查是否已经达到最大字体大小
                    if (fontSize >= maxFontSize) {
                        break
                    }

                    songName.style.fontSize = (fontSize + 1) + "px"
                }

                // 如果字体宽度大于父元素宽度，则减小字体大小
                while (songName.scrollWidth > parentElement.offsetWidth || songName.scrollHeight > parentElement.offsetHeight) {
                    var style = window.getComputedStyle(songName, null).getPropertyValue('font-size')
                    var fontSize = parseFloat(style);
                    songName.style.fontSize = (fontSize - 1) + "px";
                }
            }
        }
        window.onload = adjustFontSize
        window.onresize = adjustFontSize
    </script>
</body>